
//  定义自定义的钩子函数
// 01: 自定义的钩子函数 本质是一个函数
// 02: 函数名以use 开头
// 03 :该钩子函数的作用: 可以通过该钩子函数 获取当前浏览的网络信息
import { useState, useEffect } from 'react';
const useOnline = () => {
    // console.log(navigator.onLine)
    const [line, setLine] = useState(navigator.onLine);
    // 注意: addEventListener绑定事件和清除事件必须是同一个事件,这样才能清除,处理函数也是同一个

    const onlineFn = () => {
        console.log('在线')
        // 修改当前网络状态
        setLine(true)
    }

    const offlineFn = () => {
        console.log('离线')
        setLine(false)
    }

    // 需要使用生命周期函数 
    // 初始化执行, 数据更新时,先执行return 箭头函数,再执行初始化
    useEffect(() => {
        // 初始化
        window.addEventListener('online', onlineFn)
        window.addEventListener('offline', offlineFn)
        return () => {
            // 数据更新触发 
            window.removeEventListener('online', onlineFn)

            window.removeEventListener('offline', offlineFn)

        }
    })

    // 将获取的当前的浏览器状态返出去
    return line

}


export default useOnline

